<template>
  <div class="private-message-title">
    <div class="private-message-info">
      <div>ic</div>
      <div class="user-nickname">{{ selectedItem.targetUser.nickname }}</div>
      <div class="separate">#</div>
      <div class="user-id">{{ selectedItem.targetUser.userId }}</div>
      <!--<n-tag :bordered="false" type="info" size="small">机器人</n-tag>-->
      <!--      <div class="source">-->
      <!--        <div>来自</div>-->
      <!--        <div>???</div>-->
      <!--        <div>？？？</div>-->
      <!--      </div>-->
    </div>
    <div>
      <el-button type="success">加为好友</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { usePrivateMessageStore } from "@/store";
import { storeToRefs } from "pinia";

const privateMessageStore = usePrivateMessageStore();
const { selectedItem } = storeToRefs(privateMessageStore);
</script>

<style scoped>
.private-message-title {
  font-size: 16px;
  height: 80px;
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
  /*居中*/
  align-items: center;
}

.source {
  display: flex;
}

.el-button {
  width: 80px;
  height: 32px;
  font-size: 16px;
}

.n-tag {
  width: 36px;
  height: 21px;
  font-size: 10px;
  padding: 3px;
}

.private-message-info {
  display: flex;
}

.user-nickname {
  color: #ff6bdb;
  margin-left: 10px;
  font-weight: bold;
  /*font-size: 18px;*/
}

.user-id {
  margin-right: 10px;
}

.separate {
  margin: 0 2px;
}
</style>
